<template>
	<div>
		<div v-show="cwglyemian">
		<div style="text-align: left">
		<el-button plain style="" @click="add">新增供应商</el-button>
<!--		<el-button plain style="" @click="shangbao">上报供应商</el-button>-->
		</div>
		<el-form :model="chaxun" style="overflow: hidden">
            <el-select v-model="chaxun.gongyingshang_name" style="float: left">
<!--				<el-input v-model="chaxun.gongyingshang_name" clearable placeholder="请输入供应商名称" ></el-input>-->
                <el-option  v-for="list of Arr1"  :value="list"  placeholder="请选择供应商名称" >{{list}}</el-option>
            </el-select>
				<el-date-picker
						align="right"
						style="cursor: pointer;float: left;margin:0 5px"
						v-model="chaxun.value1"
						type="date"
						:picker-options="pickerOptions"
						placeholder="选择日期">
				</el-date-picker>
			<el-button type="primary" style="float: left;" @click="cx">查询</el-button>
			<el-button type="primary" style="float: left;" @click="cz">重置</el-button>
		</el-form>
		<h1>供应商列表</h1>
		<el-table
				:data="istrue?cwglDada:table"
				border slot="empty"
				style="width: 70%;text-align: center;margin: auto">
			<el-table-column prop="id" label="编号"
							 width>
			</el-table-column>
			<el-table-column prop="sp_name" label="项目名称"
							 width>
			</el-table-column>
			<el-table-column prop="gys_name" label="供应商"
							 width>
			</el-table-column>
			<el-table-column prop="time" label="日期"
							 width>
			</el-table-column>
			<el-table-column prop="caozuo" label="操作"
							 width>
				<template slot-scope="scope">
					<el-button type="primary"
							   @click="chakanxq(scope.$index, scope.row)">供应商详情</el-button>
				</template>
			</el-table-column>
		</el-table>
		<div id="fenye">
			<el-pagination
					background
					layout="prev, pager, next"
					:total="cwglDada.length"
					:page-size="5"
					:pager-count="7"
					@current-change="changePage">
			</el-pagination>
		</div>
		</div>
<!--===========新增供应商-->
		<div v-show="xinzeng" style="margin: auto">
			<h1>新增供应商页面</h1>
			<el-form :label-position="labelPosition" :model="ruleForm" :rules="addrules" ref="ruleForm"  label-width="130px">
                <el-form-item label="项目名称" prop="sp_name"  style="width: 300px;margin: 15px auto">
                    <el-input v-model="ruleForm.sp_name" ></el-input>
                </el-form-item>
				<el-form-item label="供应商名称" prop="gys_name"  style="width: 300px;margin: 15px auto">
					<el-input v-model="ruleForm.gys_name" ></el-input>
				</el-form-item>
				<el-form-item label="选择日期" prop="time" style="width: 300px;margin: 15px auto">
					<el-date-picker
							v-model="ruleForm.time"
							align="right"
							style="cursor: pointer;padding-right: 0;margin: 11px auto"
							type="date"
							:picker-options="pickerOptions"
							placeholder="选择日期">
					</el-date-picker>
				</el-form-item>
				<el-form-item label="供应商详细信息" prop="gys_xq"  style="width: 300px;margin: 15px auto">
					<el-input v-model="ruleForm.gys_xq" ></el-input>
				</el-form-item>
			</el-form>
			<el-button plain @click="quxiao">取消添加</el-button>
			<el-button plain @click="tijiao('ruleForm')">添加</el-button>
		</div>
<!--		=============财务管理详情====-->
		<el-dialog
				title="提示"
				:visible.sync="xiangqing"
				width="30%"
				>
			<h1>资金往来详细</h1>
			<el-form ref="form" :model="form" label-width="100px">
				<el-form-item label="供应商名称" >
					<el-link target="_blank"  v-model="form.gys_name" @click="chakan"> {{form.gys_name}}</el-link>
				</el-form-item>
				<el-form-item label="已付货款">
<!--					<el-input :disabled="true" v-model="form.yifu"></el-input >-->
                    <el-link target="_blank"  v-model="form.yifu"> {{form.yifu}}</el-link>
				</el-form-item>
				<el-form-item label="未付款">
<!--					<el-input :disabled="true" v-model="form.weifu"></el-input >-->
                    <el-link target="_blank"  v-model="form.weifu"> {{form.weifu}}</el-link>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
    <el-button @click="xiangqing = false">取 消</el-button>
    <el-button type="primary" @click="dialogVisible = false">查看其它账单</el-button>
            </span>
		</el-dialog>
<!--        =========供应商详情===-->
        <el-dialog
                :visible.sync="gysxiangqing"
                width="30%"
        >
            <h1>供应商详情</h1>
			<h2>{{this.form.gys_xq}}</h2>
            <span slot="footer" class="dialog-footer">
             <el-button @click="gysxiangqing = false">确定</el-button>
            </span>
        </el-dialog>
	</div>
</template>
<script>
	import {mapActions} from 'vuex'
	export default {
		name:'cwgl',
		components:{

		},
		data(){
			return{
				chaxun:{
					gongyingshang_name:"",
					value1:"",
				},
				ruleForm:{      //新增供应商
                    sp_name:'',
					gys_name:'',
					time:'',
					gys_xq:''
				},
				form:{       //财务管理详情
					gys_name:'',
					yifu:'',
					weifu:'',
					gys_xq:''
				},
				addrules:{     //添加规则
                    sp_name:[
                        { required: true, message: '请输入项目名称', trigger: 'blur' },
                    ],
					         gys_name: [
							{ required: true, message: '请输入供应商名称', trigger: 'blur' },
						],
						time: [
							{ required: true, message: '请选择日期', trigger: 'blur' },
						],
					gys_xq: [
						{ required: true, message: '请输入供应商详情', trigger: 'blur' },
					],
				},
				pickerOptions: {                     //日期
					disabledDate(time) {
						return time.getTime() > Date.now();
					},
					shortcuts: [{
						text: '今天',
						onClick(picker) {
							picker.$emit('pick', new Date());
						}
					}, {
						text: '昨天',
						onClick(picker) {
							const date = new Date();
							date.setTime(date.getTime() - 3600 * 1000 * 24);
							picker.$emit('pick', date);
						}
					}, {
						text: '一周前',
						onClick(picker) {
							const date = new Date();
							date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
							picker.$emit('pick', date);
						}
					}]
				},
				labelPosition: 'right',
				cwglyemian:true,
				xinzeng:false,
				xiangqing: false,
                gysxiangqing:false,
				istrue:true,
				table:[]
			}
		},
		created() {
			this.DataA().then(res=>{

			})
			// this.DataCount().then(res => {
            //
			// })
		},
		computed:{
			cwglDada(){
				return this.$store.state.cwgl.cwglDada
			},
            Arr1(){
                return this.$store.state.cwgl.Arr1
            },
			// currentData() {
			// 	return this.$store.state.cwgl.currentData
			// },
		},
		methods:{
			...mapActions(['DataA']),
			changePage(val){       //分页
				this.DataA(val)
			},
			chakanxq(index,row){          //查看详情
				this.xiangqing=!this.xiangqing
				this.form.gys_name=row.gys_name
				this.form.gys_xq=row.gys_xq
				this.form.yifu=row.yifu
				this.form.weifu =row.weifu
				// console.log(this.form.gys_xq)
			},
			add(){   //打开添加页面
				this.cwglyemian=!this.cwglyemian
				this.xinzeng=!this.xinzeng
			},
			quxiao(){
				this.cwglyemian=!this.cwglyemian
				this.xinzeng=!this.xinzeng
			},
            chakan(){            //查看供应商详细
                this.xiangqing=!this.xiangqing
                this.gysxiangqing=!this.gysxiangqing
				// console.log(this.form.gys_xq)
                // gsyxq=this.form.gys_name
            },
			tijiao(formName){     //添加
				// console.log(this.ruleForm.gys_name)
				// console.log(this.ruleForm.time)
				// console.log(this.ruleForm.gys_xq)
				this.$refs[formName].validate((valid) => {
				if(valid){
					this.$axios({
						url:"",
						method: "post",
						data:{
							gys_name:this.ruleForm.gys_name,
							time:this.ruleForm.time,
							gys_xq:this.ruleForm.gys_xq
						}
					}).then(res=>{
						if (res.data.code === 200) {
							this.$message({
								type: 'success',
								message: '添加成功!'
							});
						this.cwglyemian=!this.cwglyemian
						this.xinzeng=!this.xinzeng
							this.istrue=true
							this.DataA(1)
						} else {
							this.$message.error('添加失败！');
						}
					})
				}else {
					alert("输入的值不能为空")
				}
				});
			},
            cz(){
                this.istrue=true
                this.DataA()
                this.chaxun.gongyingshang_name=''
                this.chaxun.value1=''
            },
			cx(){
				// console.log(this.chaxun.gongyingshang_name)
				this.$axios({
					url: '',
					method: 'post',
					data:{gongyingshang_name:this.chaxun.gongyingshang_name,
					      time:this.chaxun.value1
					},
				}).then(res => {
					// console.log(res)
					if (res.data.code ===200) {
						this.istrue=false
						this.table=res.data.data
					} else {
						this.$message.error('查找失败！');
					}
				})
			},
            shangbao(){           //上报

            }
		}
	}
</script>
<style scoped>
	/*====下面是分页*/
	#fenye{
		margin:10px auto;
		width: 300px;
		text-align: center;
	}
	/*=====下面是添加 */
	.el-input{
		width: auto;
	}
	.el-input__inner:hover{
		cursor: pointer;
	}
</style>